
<template>
  <div>
    Home页面
    <hr />
    <h1>{{ phone }}</h1>
    <!-- <h3>{{ $store.state.count }}</h3> -->
    <h3>{{ count }}</h3>
    <button @click="incr">+++++</button>
    <hr />
    <ul>
      <!-- 条件渲染 v-if v-for -->
      <template v-if="films.length == 0">
        <li>玩命加载中...</li>
      </template>
      <template v-else>
        <li v-for="item in films" :key="item.filmId">{{ item.name }}</li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  // 获取vuex中的数据，用计算属性
  computed: {
    count() {
      return this.$store.state.count
    },
    films() {
      return this.$store.state.films
    },
    phone() {
      return this.$store.getters.phone
    },
  },

  // created beforeMount mounted
  async mounted() {
    // 触发actions,调用 dispatch
    this.$store.dispatch('getFilmsAction', 1)
  },

  methods: {
    incr() {
      // 参1：指令，mutations中的方法名
      // 参2: 传入给指令的参数
      this.$store.commit('setIncr', 10)
    },
  },
}
</script>

<style lang="scss" scoped>
</style>